<template>
  <view>
    <uni-row :class="posit">
      <uni-segmented-control
          style="margin-bottom: 10px;"
          :current="current"
          style-type="text"
          active-color="#007aff"
          :values="currents"
          @clickItem="clickSegment"
      ></uni-segmented-control>
    </uni-row>
    <uni-row v-for="c in currents.length">
      <view v-if="current===c-1">
        <uni-grid
            :column="2"
            border-color="#d0dee5"
            :show-border="false"
            :square="false"
            :highlight="true"
        >
          <uni-grid-item v-for="item in pros[c-1].products" :key="item.proId">
            <uni-card
                :cover="item.image"
                :title="item.proName"
                :is-full="true"
                @click="goToDetail(item.proId)"
            >
              <text class="text-red">￥</text>
              <text class="text-red" style="font-size: 24px">{{ Math.trunc(item.proPrice) }}</text>
              <text class="text-red">{{ (item.proPrice - Math.trunc(item.proPrice)).toFixed(2).substring(1, 4) }}</text>
            </uni-card>
          </uni-grid-item>
        </uni-grid>
        <view class="text-center" style="margin: 10px 0 70px 0">到达底线了</view>
      </view>
    </uni-row>
  </view>
</template>

<script>
import UniSegmentedControl
  from "../../../../uni_modules/uni-segmented-control/components/uni-segmented-control/uni-segmented-control";
import UniGrid from "../../../../uni_modules/uni-grid/components/uni-grid/uni-grid";
import UniGridItem from "../../../../uni_modules/uni-grid/components/uni-grid-item/uni-grid-item";

export default {
  components: {UniGridItem, UniGrid, UniSegmentedControl},
  data() {
    return {
      //缓存店铺商品
      pros: [{products:[]}],
      //缓存shopId
      shopId: 0,
      //分段器Class动态属性
      posit: "",
      current: 0,
      currents: [],
    }
  },
  methods: {
    //分段器选择页面
    clickSegment(e) {
      this.current = e.currentIndex;
    },
    //点击商品卡片跳转商品详情页
    goToDetail(proId) {
      uni.navigateTo({ url: '/pages/product/details/index?proId='+proId});
      // 在跳转后的详情页中可以通过获取 proId 来获取对应商品的数据
    },
  },
}
</script>

<style>
.segmented {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  background-color: #e9e9eb;
  width: 100%;
}
</style>
